<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  {{msg}}
  <div id="app">
    {{msg}}
    <!-- 被管理的容器才可以使用vue提供的功能 -->
  </div>
  <script src="./vue.js"></script>
  <script>
    // 初始化vue实例，vue实例就是vm的意思
    const vm = new Vue({
      // 初始化的配置对象，里面有很多选项
      // el === element 元素，标签，容器
      // el指定当前vue实例管理的容器是谁。
      // 值是：选择器 | dom元素
      // el: '#app',
      // el: document.querySelector('#app'),
      // Do not mount Vue to <html> or <body> - mount to normal elements instead.
      // el不能指定 html 和 body 容器
      el: 'body',
      data: {
        msg: 'hi vue'
      }
    })
  </script>
</body>
</html>